<template>
  <div class='tags-container'>
     <tags-add
      @closeDialog='closeDialog'
      :showDialog="showDialog"
      @updataList='updataList'
      :pageflag='pageflag'
      :tagid='+tagid'
      :tableData='tableData'
      >
      </tags-add>
    <div class="app-container">
      <!-- 表格 -->
        <el-card class="box-card">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 30px;" v-if="this.$route.query.name">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{this.$route.query.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>

          <!-- input框＋按钮 -->
          <el-form :inline="true" class="demo-form-inline" style="width:100%" >
            <el-form-item label="标签名称" >
              <el-input size="small" v-model="tagNameIpt"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select placeholder="请选择" size="small" v-model="stateVal">
                <el-option  v-for="item in state" :key="item.value" :value='item.value' :label='item.label'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button  @click="onSubmit" size="small">清除</el-button>
              <el-button type="primary" @click="SearchMethod" size="small">搜索</el-button>
            </el-form-item>
            <el-form-item class="fr">
              <el-button type='text' icon="el-icon-back" @click="$router.push({path:'list'})" v-if="this.$route.query.name">返回学科</el-button>
              <el-button type="success" icon="el-icon-edit" size="small" @click="addBtn('new')">新增按钮</el-button>
            </el-form-item>
          </el-form>
          <!-- '数据一共xx条'信息提示 -->
          <el-alert
              :title="titlecounts"
              type="info"
              class="alert"
              :closable="false"
              show-icon
            >
          </el-alert>
          <!-- 表格 -->
          <el-table
            :data="tableData"
            style="width: 100%"
            class="table"
            header-cell-class-name="table_header"
            >
            <el-table-column
              type="index"
              label="序号"
              >
            </el-table-column>
            <el-table-column
              prop="subjectName"
              label="所属学科"
              >
            </el-table-column>
            <el-table-column
              prop="tagName"
              label="标签名称">
            </el-table-column>
            <el-table-column
              prop="username"
              label="创建者">
            </el-table-column>
              <el-table-column
              label="创建日期"
              >
              <template #default={row}>
              {{row.addDate | parseTimeByString}}
              </template>
            </el-table-column>
              <el-table-column
              label="状态">
              <template #default={row}>
                <span v-if="+row.state===1">已启用</span>
                <span v-else>已禁用</span>
              </template>
            </el-table-column>
            <el-table-column
            label="操作"
            >
            <template #default={row}>
              <el-button v-if="+row.state===1"
                type="text"
                size="small"
                @click="changeState(row.state=!row.state,row.id)"
                >
                禁用
              </el-button>
              <el-button v-else
                type="text"
                size="small"
                @click="changeState(row.state=!row.state,row.id)"
                >
                启用
              </el-button>
                <el-button
                type="text"
                size="small"
                :disabled='+row.state===1'
                @click="addBtn('edit',row.id)"
                >
                修改
              </el-button>
                <el-button
                type="text"
                size="small"
                :disabled='+row.state===1'
                @click="delCatlog(row.id)"
                >
                删除
              </el-button>
            </template>
          </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="+page"
            background
            :page-sizes="[5,10,15,20]"
            :page-size="+pagesize"
            :total="counts"
            layout=" prev, pager, next,sizes,jumper"
            class="fr"
            style="padding:20px 0px">
          </el-pagination>
        </el-card>
    </div>
    </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags'
import { status } from '@/api/hmmm/constants'
import tagsAdd from '../components/tags-add.vue'
export default {
  components: { tagsAdd },
  name: 'catalog',
  data () {
    return {
      // 这是表格的数据
      tableData: [],
      counts: 0, // 总记录数
      pagesize: 10, // 每页条数
      pages: '', // 总页数
      page: 1, // 当前页码
      showDialog: false,
      state: status,
      stateVal: '', // 启用禁用状态下拉框
      tagNameIpt: '', // 标签名称输入框
      pageflag: '',
      tagid: ''
    }
  },
  async created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      let res
      if (this.$route.query.name) {
        res = await list({
          page: this.page,
          pagesize: this.pagesize,
          subjectID: this.$route.query.id
        })
      } else {
        res = await list({
          page: this.page,
          pagesize: this.pagesize
        })
      }
      // console.log(data)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    updataList () {
      this.getlist()
    },
    // 启用禁用
    async  changeState (state, id) {
      if (state === false) {
        state = 0
      } else {
        state = 1
      }
      await changeState({ state: state, id })
      // this.getlist()
    },
    onSubmit () {
      this.stateVal = ''
      this.tagNameIpt = ''
      this.getlist()
    },
    handleSizeChange (pagesize) {
      this.pagesize = pagesize
      this.page = 1
      if (this.tagNameIpt || this.stateVal !== '') { return this.SearchBtn() }
      this.getlist()
    },
    handleCurrentChange (page) {
      this.page = page
      if (this.tagNameIpt || this.stateVal !== '') { return this.SearchBtn() }
      this.getlist()
    },
    closeDialog () {
      this.showDialog = false
    },
    addBtn (flag, id) {
      this.showDialog = true
      if (flag === 'edit') {
        this.pageflag = '修改标签'
        this.tagid = id
      } else {
        this.pageflag = '新增标签'
      }
    },
    async SearchBtn () {
      let res
      if (!this.$route.query.name) {
        if (!this.tagNameIpt && this.stateVal === '') {
          res = await list({
            page: this.page,
            pagesize: this.pagesize
          })
        } else if (this.tagNameIpt && this.stateVal === '') {
          res = await list({
            tagName: this.tagNameIpt,
            page: this.page,
            pagesize: this.pagesize
          })
        } else if (!this.tagNameIpt && this.stateVal !== '') {
          res = await list({
            state: this.stateVal,
            page: this.page,
            pagesize: this.pagesize
          })
        } else {
          res = await list({
            state: this.stateVal,
            tagName: this.tagNameIpt,
            page: this.page,
            pagesize: this.pagesize
          })
        }
      } else {
        if (!this.tagNameIpt && this.stateVal === '') {
          res = await list({
            page: this.page,
            pagesize: this.pagesize,
            subjectID: this.$route.query.id
          })
        } else if (this.tagNameIpt && this.stateVal === '') {
          res = await list({
            tagName: this.tagNameIpt,
            page: this.page,
            pagesize: this.pagesize,
            subjectID: this.$route.query.id
          })
        } else if (!this.tagNameIpt && this.stateVal !== '') {
          res = await list({
            state: this.stateVal,
            page: this.page,
            pagesize: this.pagesize,
            subjectID: this.$route.query.id
          })
        } else {
          res = await list({
            state: this.stateVal,
            tagName: this.tagNameIpt,
            page: this.page,
            pagesize: this.pagesize,
            subjectID: this.$route.query.id
          })
        }
      }
      this.counts = res.data.counts
      this.tableData = res.data.items
    },
    async delCatlog (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功!')
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    SearchMethod () {
      this.page = 1
      this.SearchBtn()
    }
  },
  computed: {
    titlecounts () {
      return `数据一共${this.counts}条`
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  padding: 5px 10px;
  .fr{
    float: right !important;
  }
  .table{
     margin-top:20px
  }
  ::v-deep{
     .table_header{
        background-color:#fafafa;
        border-bottom:10px solid #e8e8e8;
      }
  }
}
</style>
